<template>
	<view>		
		<view style="background-color: #FFFFFF;" class="top_shit">
			<view class="flex_center_between" style="border-top: 1rpx solid #F0F0F0;">
				<view class="m-lr-20 input_money top_shit">提现金额</view>
				<view @click="tomoneyList" class="nav_right">提现记录</view>
			</view>
			
			<view class="input_box1 color250">
				<input @input="tixian" type="number" v-model="money" placeholder-class="color250" placeholder="0" class="p-td-20 p-l-50">
				<view class="input_icon">¥</view>
			</view>
			<view class="flex_center_between p-td-20 m-lr-20">
				<view class="color666">可提现全部金额¥{{allMoney}}</view>
				<view @click="money=allMoney" class="color250">全部提现</view>
			</view>
			<view class="flex_center_center radio_box m-lr-20">
				<view class="flex_center_center radio_item" @click="checked(0)">
					<image src="@/static/images/radio01.png" v-if="type==1"></image>
					<image src="@/static/images/radio02.png" v-if="type==0"></image>
					<view>提现到支付宝</view>
				</view>
				<view class="flex_center_center radio_item" @click="checked(1)">
					<image src="@/static/images/radio01.png" v-if="type==0"></image>
					<image src="@/static/images/radio02.png" v-if="type==1"></image>
					<view>提现到银行卡</view>
				</view>
			</view>
			<view style="height: 260rpx;" v-if="type==0">
				<input type="text" v-model="userName" class="" style="padding: 20rpx 30rpx;border-bottom: 1rpx solid #E5E5E5;" placeholder="请输入姓名">
				<input v-model="payNum" maxlength="11" type="number" class="" style="padding: 20rpx 30rpx;border-bottom: 1rpx solid #E5E5E5;" placeholder="请输入支付宝账号">
			</view>
			<view v-if="type==1" style="height: 260rpx;">
				 <view style="border-top: none;" class="uni-list">
					<view  class="uni-list-cell">
						<view  class="uni-list-cell-left">
							请选择银行卡
						</view>
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{array[index]}}</view>
							</picker>
						</view>
					</view>
				</view>
				<button @click="maskFlag=true" style="width: 160rpx;height: 60rpx;background-color: #c0024e;border-radius: 10rpx;line-height: 60rpx;color: #FFFFFF;margin-top: 30upx;
				font-size: 28rpx;padding: 0;">添加银行卡</button>
			</view>
			
		</view>
		<view style="margin: 40rpx auto;">
			<button style="width: 160rpx;height: 60rpx;background-color: #c0024e;border-radius: 10rpx;line-height: 60rpx;color: #FFFFFF;
			font-size: 28rpx;padding: 0;" @click="extract">申请提现</button>
		</view>
		<label class="xieyi">
			<checkbox-group @change="change" >
				<checkbox :checked="flag" style="transform:scale(0.7);" /><text>请勾选并同意《服务协议》</text>
			</checkbox-group>
		</label>
		
		<view  @click="maskFlag=false" v-if="maskFlag" style="background-color: rgba(0,0,0,0.8);width: 100%;height: 100vh;position: fixed;left: 0;top: 0;z-index: 99;" class="mask">
			<view class="maskInnerBox" @click.stop style="padding: 30rpx ;width: 520upx;margin: auto;background-color: #FFFFFF;transform: translate(-50%,-50%);position: absolute;top: 50%;left: 50%;">
				<view style="text-align: center;font-size: 30upx;font-weight: bold;">新增银行卡</view>
				<view class="commonLine">
					<text class="commonText">开户人姓名：</text><input v-model="openName" type="text" placeholder="请输入银行卡账户名" value="" />
				</view>
				<view class="commonLine">
					<text class="commonText">银行名称：</text><input v-model="openBankName" type="text" placeholder="请输入银行卡名称" value="" />
				</view>
				<view class="commonLine">
					<text class="commonText">收款账号：</text><input v-model="openNum" maxlength="20" type="number" placeholder="请输入收款账号" value="" />
				</view>
				<view class="commonLine">
				    <text style="width: 300rpx;" class="commonText">状态：</text>
					<radio-group class="" @change="radioChange">
						<label class="" v-for="(item,index) in radioItems" :key="index">
							<radio color="#ff4300" style="transform: scale(0.8);" :id="item.name" :value="item.name" :checked="item.checked"></radio>
							<label class="" :for="item.name">
								<text>{{item.value}}</text>
							</label>
						</label>
					</radio-group>
				</view>
				
				<view class="commonLine">
					<text  class="commonText">设为默认：</text>
					<label class="xieyi">
						<checkbox-group @change="change2" >
							<checkbox color="#ff4300"  :checked="openDefaule" style="transform:scale(0.7);" @click="flag=!flag" /><text>设为默认账号信息</text>
						</checkbox-group>
					</label>
				</view>
				<view style="display: flex;justify-content: space-around;" class="">
					<button @click="add()" style="width: 160rpx;height: 60rpx;background-color: #c0024e;border-radius: 10rpx;line-height: 60rpx;color: #FFFFFF;
					font-size: 28rpx;padding: 0;" >新增账号</button>
					<button style="width: 160rpx;height: 60rpx;background-color: #c0024e;border-radius: 10rpx;line-height: 60rpx;color: #FFFFFF;
					font-size: 28rpx;padding: 0;" @click="maskFlag=false">取消</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				openName:"",
				openBankName:"",
				openNum:"",
				openType:"",
				openDefaule:false,
				maskFlag:false,
				userName:"",
				payNum:"",
				bankcardNum:"",
				bankName:"",
				realname:"",
				money:"",
				allMoney:"",
				type:0,
				flag:true,
				array: [],
				array2: [],
				index: 0,
				 radioItems: [{
						name: '1',
						value: '开启',
						checked: 'true'
					},
					{
						name: '2',
						value: '关闭'
						
					}
				]
			}
		},
		onLoad() {
			this.$util.request({
				url:'/mobile/index.php?act=member_index&op=getMemberBalance',
				method:'POST',
				data:{
		
				}
			}).then(res=>{
				this.allMoney=res.datas.balance_info.available_predeposit
			})
			this.getBankList();
		},
		methods:{
			tomoneyList(){
				uni.navigateTo({
					url:"withdrawal_log"
				})
			},
			toBack(){
				uni.navigateBack({
					delta:1
				})
			},
			getBankList(){
				this.$util.request({
					url:'/mobile/index.php?act=member_index&op=member_bank_list',
					method:'POST',
					data:{}
				}).then(res=>{
					this.array=[]
					this.array2=res.datas.list
					for(let i in res.datas.list){
						var aa=res.datas.list[i].bankname+'   '+res.datas.list[i].number
						this.array.push(aa)
					}
				})
			},
			add(){
				if(this.openName.trim().length == 0 ||undefined){
					uni.showModal({
						content:"开户名不能为空"						
					})
					return false
				}
				if(this.openNum.trim().length == 0 ||undefined){
					uni.showModal({
						content:"银行账户不能为空"						
					})
					return false
				}
								
				this.$util.request({
					url:'/mobile/index.php?act=member_index&op=add_member_bank',
					method:'POST',
					data:{
						"realname":this.openName,
						"bankname":this.openBankName,
						"number":this.openNum,
						"status":this.openType,
						"isdefault":this.openDefaule						
					}
				}).then(res=>{
					if(res.error_code == 0){
						uni.showToast({
							title:"添加成功",
							icon:"success"
						})
						this.maskFlag=false
						this.openName=""
						this.openBankName=""
						this.openNum=""
						this.openType=""
						this.openDefaule=true	
						this.userName=""
						this.getBankList()
					}else{
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
				})
			},
			  radioChange: function(e) {
				var checked = e.target.value
				this.openType=checked
				var changed = {}
				for (var i = 0; i < this.radioItems.length; i++) {
					if (checked.indexOf(this.radioItems[i].name) !== -1) {
						changed['radioItems[' + i + '].checked'] = true
					} else {
						changed['radioItems[' + i + '].checked'] = false
					}
				}
			},
			tixian(e){
				var aa=Number(e.detail.value)				
				if(Number(aa)> 10000){
					this.money=Number(10000)
					uni.showToast({
						title:"提现金额不可大于总金额哟～",
						icon:"none"
					})				
				}
			},
			 bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index=e.target.value
				// this.bankName=this.array[e.target.value]
				this.bankName=this.array2[this.index].bankname,
				this.bankcardNum=this.array2[this.index].number,
				this.userName=this.array2[this.index].realname
			},
			change(e){
				this.flag=!this.flag
				console.log(this.flag)
			},
			change2(e){
				this.openDefaule=!this.openDefaule
			},
			extract(){	
				if(this.money<1){
					uni.showToast({
						title:"提现金额小于1",
						icon:"error"
					})
					return
				}
				if(this.flag){					
					if(this.type == 0){
						if(this.userName.trim().length<1){
							uni.showToast({
								title:"姓名不能为空",
								icon:"none"
							})
							return false
						}
						if(this.payNum.trim().length<1){
							uni.showToast({
								title:"支付宝账号不能为空",
								icon:"none"
							})
							return false
						}
						if(this.money.trim()<=0){
							uni.showToast({
								title:"提现金额不能为0",
								icon:"none"
							})
							return false
						}
						this.$util.request({
							url:'/mobile/index.php?act=member_index&op=get_money',
							method:'POST',
							data:{
								"pdc_amount":this.money,
								"pdc_alipay_account":this.payNum
							}
						}).then(res=>{
							if(res.error_code==0){
								uni.showToast({
									title:"操作成功,请等待平台审核",
									icon:"none",
									success() {
										setTimeout(()=>{
											uni.navigateBack({
												duration:1
											})
										},1000)
									}
								})
								
							}else{
								uni.showToast({
									title: res.message,
									icon:"none"
								})
							}
						})
					}
					if(this.type == 1){
						if(this.array.length<1){
							uni.showToast({
								title:"请添加银行卡",
								icon:"none"
							})
							return false
						}
						if(this.array2.length<1){
							uni.showToast({
								title:"请选择银行卡",
								icon:"none"
							})
							return false
						}
						this.$util.request({
							url:'/mobile/index.php?act=member_index&op=get_money',
							method:'POST',
							data:{
								"pdc_amount":this.money,
								"pdc_bank_name":this.bankName||this.array2[0].bankname,
								"pdc_bank_no":this.bankcardNum||this.array2[0].number,
								"pdc_bank_user":this.realname||this.array2[0].realname,
							}
						}).then(res=>{
							if(res.error_code==0){
								uni.showToast({
									title:"操作成功,请等待平台审核",
									icon:"none",
									success() {
										setTimeout(()=>{
											uni.navigateBack({
												duration:1
											})
										},1000)
									}
								})
								this.bankName=""
								this.bankcardNum=""
								this.userName=""
								this.money='';
							}else{
								uni.showToast({
									title: res.message,
									icon:"none"
								})
							}
						})
					}
				}else{
					 uni.showToast({
						title:'请勾选同意服务协议',
						icon:"none" 
					});
				}
				},
			checked(id){
				console.log('1')
				if(id!==this.type){
					this.type=id
				}
			}
		}
	}
</script>

<style>

	/* 状态栏 */
	.nav{
		display: flex;justify-content: space-between;background-color: #FFFFFF;
		height: 55rpx;padding:0 20rpx;margin-bottom: 20rpx;
		padding-top: 20rpx;
		/* #ifdef MP-WEIXIN */
			padding-top: 60rpx;
		/* #endif */
	}
	.nav_center{
		font-size: 32rpx;margin-left: 100rpx;
	}
	.nav_right{
		font-size: 26rpx;margin-right: 50rpx;margin-top: 8rpx;
	}
	.back{
		height: 30rpx;width: 15rpx;
		margin-top: 18rpx;
	}
	.status_bar {  
	    height: var(--status-bar-height);  
	    width: 100%;  
	    background-color: #FFFFFF;  
	}  
	.top_view {  
	    height: var(--status-bar-height);  
	    width: 100%;  
	    position: fixed;  
	    background-color: #FFFFFF;  
	    top: 0; 
	    z-index: 999;  
	}
	.xieyi .uni-checkbox-input-checked{
		 background-color: #ff4300;
	 }
	.uni-checkbox-input:hover{
		border-color: #ff4300 !important;
	} 
	
	.uni-checkbox-input{
		color: #FFFFFF !important;
	} 
	.radio_box{
		border-top: 1rpx solid #E5E5E5;border-bottom: 1rpx solid #E5E5E5;padding: 35rpx 0;text-align: center;
	}
	.radio_item{
		width: 50%;border-right: 1rpx solid #E5E5E5;text-align: center;
	}
	.radio_item:nth-child(2){
		border: none;
	}
	.radio_item image{
		height: 40rpx;width: 40rpx;margin-right: 20rpx;
	}
	.color666{
		color: #666666;
	}
	.color250{
		color: #ff4300;
	}
	.input_box1{
		position: relative;
	}
	.input_money{
		padding: 20rpx 0;
	}
	.input_icon{
		position: absolute;left: 20rpx;top: 20rpx;font-size: 34rpx;
	}
	.input_box1 input{
		border-bottom: 1rpx solid #E5E5E5;font-size: 40rpx !important;
	}
	.flex_center_between{
		display: flex;justify-content: space-between;align-items: center;
	}
	.flex_center_center{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.p-td-20{
		padding-top:20rpx ;padding-bottom:20rpx ;
	}
	.m-lr-20{
		margin: 0 20rpx;
	}
	.p-l-50{
		padding-left: 50rpx;
	}
	.mask{
		
	}
	
	.commonLine{
		display: flex;
		height: 90rpx;
		line-height: 90rpx;
		
	}
	.commonText{
		display: inline;
		width: 180rpx;
		text-align: right;
		padding-right: 20rpx;
	}
	.mask input{
		display: inline;			
		border: 1rpx solid #f4f4f4;
		width: 300rpx;
		height: 70rpx;
		line-height: 70rpx;
		padding-left: 10upx;
		margin-top: 10upx;
	}
	.uni-list::before {
		height: 0;
	}
	.maskInnerBox view+view{
		margin-top: 20upx;
	}
</style>
